打開 Blender，修改一下方塊

就做好了

讓表面細分使其圓滑

製作材質節點

調整ＵＶ

產生 中藥包 的 gltfjsx ～

Auto-generated by: https://github.com/pmndrs/gltfjsx


import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/modelCMDpack.gltf')
  return (
    <group {...props} dispose={null}>
      <group scale={[1, 0.29, 1]}>
        <mesh geometry={nodes.Cube_1.geometry} material={materials['Material.002']} />
        <mesh geometry={nodes.Cube_2.geometry} material={materials.Material} />
      </group>
    </group>
  )
}

useGLTF.preload('/modelCMDpack.gltf')

讓中藥包增加互動性吧～

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, useState } from 'react'
import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
export default function Model(props) {
  const { nodes, materials } = useGLTF('/modelCMDpack.gltf')
  const ref = useRef()
  // Hold state for hovered and clicked events
  const [clicked, click] = useState(false)
  const vec = new THREE.Vector3()
  const vec2 = new THREE.Vector3()

  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => {
    // ref.current.lemp
    if (props.onClicked) {
      // ref.current.position.lerp(vec.set(0, 1.5, 0), 0.1)
      // ref.current.position.y.lerp(1, 0.1)
    } else {
      // ref.current.position.lerp(vec.set(0, 0, 0), 0.1)
      // ref.current.position.y.lerp(vec.set(0, 0, 0), 0.1)
    }
    // ref.current.scale([2, 2, 2].)
    // ref.current.rotation.y = THREE.MathUtils.lerp(ref.current.rotation.y, (-mouse.x * Math.PI) / 20, 0.1)
    // ref.current.rotation.z += delta
    // ref.current.position.x += delta
  })

  return (
    <group
      {...props}
      ref={ref}
      // onClick={(event) => click(!clicked)}
      dispose={null}>
      <group scale={[1, 0.29, 1]}>
        <mesh geometry={nodes.Cube_1.geometry} material={materials['Material.002']} />
        <mesh geometry={nodes.Cube_2.geometry} material={materials.Material} />
      </group>
    </group>
  )
}

useGLTF.preload('/modelCMDpack.gltf')